<template>
    <view class="outpatient-container">
        <!-- 左侧区域(一级科室)开始 -->
        <view class="left">
            <!-- 一级科室骨架屏区域开始 -->
            <view style="background-color: #fff;padding: 20rpx;" v-if="isShowTopSkeleton" v-for="(item, index) in 14" :key="index">
                <uv-skeletons :loading="isShowTopSkeleton" :skeleton="topSkeleton"></uv-skeletons>
            </view>
            <!-- 一级科室骨架屏区域结束 -->

            <!-- #ifdef H5 -->
            <view class="top_category">
                <view v-for="(item, index) in topOutpatientList" :key="item.id"
                    class="category-item ellipsis-1"
                    :class="{ active: index === currentIndex }"
                    @click="selectTopOutpatient(index)"
                >
                    {{ item.name }}
                </view>
            </view>
            <!-- #endif -->

            <!-- #ifdef MP-WEIXIN -->
            <scroll-view scroll-y class="scroll-view">
                <view v-for="(item, index) in topOutpatientList" :key="item.id"
                    class="category-item ellipsis-1"
                    :class="{ active: index === currentIndex }"
                    @click="selectTopOutpatient(index)"
                >
                    {{ item.name }}
                </view>
            </scroll-view>
            <!-- #endif -->
        </view>
        <!-- 左侧区域(一级科室)结束 -->

        <!-- 右侧区域(二级科室)开始 -->
        <view class="right">
            <!-- 二级科室骨架屏区域开始 -->
            <view style="background-color: #fff;margin: 20rpx 10rpx;padding: 20rpx;" v-if="isShowSkeleton" v-for="(item, index) in 6" :key="index">
                <uv-skeletons :loading="isShowSkeleton" :skeleton="skeleton"></uv-skeletons>
            </view>
            <!-- 二级科室骨架屏区域结束 -->

            <!-- h5页面使用better-scroll插件实现滚动 -->
            <!-- #ifdef H5 -->
            <view class="sub-category-list">
                <view class="sub-category-item" @click="handleClickOutpatient(item)" v-for="(item, index) in subOutpatientList" :key="index">
                    <image class="cover" :src="global.FILE_DOMAIN + item.icon_url" v-if="item.icon_url"/>
                    <image class="cover" src="@/static/images/outpatient.png" v-else/>
                    <text class="name">{{ item.name }}</text>
                </view>
            </view>
            <!-- #endif -->

            <!-- 非h5页面使用scroll-view实现滚动  -->
            <!-- #ifndef H5 -->
            <scroll-view
                scroll-y
                :scroll-top="scrollTop"
                :scroll-with-animation="true"
                @scroll="handleScroll"
                class="scroll-view">
                <view class="sub-category-list">
                    <navigator class="sub-category-item" :url="'/pagesGoods/goods_list/goods_list?cid='+item.id" v-for="(item, index) in subOutpatientList" :key="index">
                        <image class="cover" :src="global.FILE_DOMAIN + item.icon_url" v-if="item.icon_url"/>
                        <image class="cover" src="@/static/images/outpatient.png" v-else/>
                        <text class="name">{{ item.name }}</text>
                    </navigator>
                </view>
            </scroll-view>
            <!-- #endif -->

            <TridentBlank v-if="isShowBlank && subOutpatientList.length == 0"/>
        </view>
        <!-- 右侧区域(二级科室)结束 -->

        <!-- 显示三级科室开始 -->
        <uni-drawer
            ref="showRight"
            mode="right"
            :mask-click="false"
            :width="300"
        >
            <view class="scroll-view">
                <scroll-view class="scroll-view-wrap" scroll-y="true">
                    <view class="scroll-content-box">
                        <view class="title-panel">
                            <text class="title">{{ secondOutpatientName }}</text>
                            <text class="iconfont icon-guanbi" @click="closeDrawer"></text>
                        </view>
                        <view class="item" v-for="(item, index) in threeOutpatient" :key="index" @click="goto(`/pagesInquiry/doctor/index?id=${item.id}&name=${item.name}`)">
                            <text>{{item.name}}</text>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </uni-drawer>
        <!-- 显示三级科室结束 -->

        <!-- 返回顶部 -->
		<TridentBackTop @backTop="backTop" :isShowBackTop="isShowBackTop"/>
    </view>
</template>

<script lang="ts" setup>
import { reactive, ref, inject } from "vue"
import { onLoad } from "@dcloudio/uni-app"
import BScroll from 'better-scroll'
import { reqGetOutpatientListAPI, reqGetOutpatientTreeAPI } from "@/apis/outpatient"
import type { Outpatient, OutpatientParams, OutpatientTree } from "@/types/outpatient"
// npm install better-scroll --save

// h5页面使用better-scroll插件实现滚动
// #ifdef H5
// 子级科室 scroll
let subscroll:any = reactive({})
// #endif

// 初始化
onLoad(async () => {
    await getOutpatientList()

    // h5页面使用 better-scroll 插件实现滚动
    // #ifdef H5
    // 一级科室 scroll
    new BScroll(document.querySelector('.left') as never, {
        probeType: 3,
        click: true,
    })

    // 子级科室 scroll
    subscroll = new BScroll(document.querySelector('.right') as never, {
        probeType: 3,
        click: true,
    })

    // 监听滚动
    subscroll.on('scroll',(position: any) => {
        isShowBackTop.value = -position.y > 100
    })
    // #endif
})


// ------------------- 定义全局变量开始 -------------------
const global:any = inject('global')

// 定义当前索引
const currentIndex = ref(0)

// 定义子级科室
const subOutpatientList = ref<OutpatientTree[]>([])

// 定义是否显示空数据
const isShowBlank = ref(false)
// ------------------- 定义全局变量结束 -------------------



// ------------------- 选择顶级科室开始 -------------------
const selectTopOutpatient = async (index: number) => {
    currentIndex.value = index
    // 获取子科室
    outpatientTreeParams.pid = topOutpatientList.value[index].id + ''
    await getOutpatientTree()

    backTop()
    // #ifdef H5
    subscroll.refresh()
    // #endif
}
// ------------------- 选择顶级科室开始 -------------------



// ------------------- 返回顶部功能开始 -------------------
const scrollTop = ref(0)

// 定义是否显示返回顶部
const isShowBackTop = ref(false)

// 返回顶部
const backTop = () => {
    // h5页面使用 better-scroll 插件实现滚动
    // #ifdef H5
    subscroll.scrollTo(0, 0, 500)
    // #endif

    // #ifndef H5
    // 视图会发生重新渲染
	scrollTop.value = scrollTop.value == 0 ? 1 : 0
    // #endif
}

// 当滚动触发时，调用事件用于显示、隐藏返回顶部图标
// #ifndef H5
const handleScroll = (e: any) => {
  isShowBackTop.value = e.detail.scrollTop > 70 ? true : false
}
// #endif
// ------------------- 返回顶部功能结束 -------------------



// ----------------- 获取一级科室功能开始 -----------------
const topOutpatientList = ref<Outpatient[]>([])
const getOutpatientList = async () => {
    // 显示骨架
    isShowTopSkeleton.value = true
    const result = await reqGetOutpatientListAPI({pid: global.PID, status: 1, sort_field: 'sort', sort_type: 'asc'})
    topOutpatientList.value = result.data.outpatients != null ? result.data.outpatients : []

    isShowTopSkeleton.value = false

    // 获取子分类
    outpatientTreeParams.pid = topOutpatientList.value[0].id + ''
    await getOutpatientTree()
}
// ----------------- 获取一级科室功能结束 -----------------



// ----------------- 获取子科室树功能开始 -----------------
// 子科室树请求参数
const outpatientTreeParams = reactive<OutpatientParams>({
  pid: 'all',
  status: 1,
  is_child: 1
})

// 获取子科室树
const getOutpatientTree = async () => {
    // 显示骨架
    isShowSkeleton.value = true

    // 请求数据
    const result = await reqGetOutpatientTreeAPI(outpatientTreeParams)
    subOutpatientList.value = result.data != null ? result.data : []

    // 隐藏骨架
    isShowSkeleton.value = false

    // 显示空数据
    isShowBlank.value = true
}
// ----------------- 获取子科室树功能结束 -----------------



// ----------------- 显示三级科室功能开始 -----------------
const threeOutpatient = ref<OutpatientTree[]>([])
const secondOutpatientName = ref('')
const handleClickOutpatient = (item: OutpatientTree) => {
    console.log(item);
    if (item.child) { // 如果存在三级科室
        showRight.value.open()
        threeOutpatient.value = item.child
        secondOutpatientName.value = item.name
    } else {
        uni.navigateTo({url: `/pagesInquiry/doctor/index?id=${item.id}&name=${item.name}`})
    }
}
const showRight = ref()

// 关闭窗口
const closeDrawer = (e: any) => {
    showRight.value.close()
}
// ----------------- 显示三级科室功能结束 -----------------



// --------------------- 跳转功能开始 --------------------
const goto = (url: string) => {
    showRight.value.close()
    if (url == '/') {
		uni.switchTab({ url: '/pages/index/index' })
		return false
	} 
    uni.navigateTo({url})
}
// --------------------- 跳转功能结束 --------------------



// ------------------ 定义骨架变量开始 -------------------
// 定义是否显示一级科室骨架
const isShowTopSkeleton = ref(false)

// 定义二级科室骨架参数
const topSkeleton = reactive([
    {
      type: 'flex',
      num: 1,
      style: 'padding:0 10rpx;',
      children: [
        {
          type: 'custom',
          num: 1,
          style: 'width: 140rpx;height: 50rpx;marginRight: 45rpx;'
        }
      ]
    },
])

// 定义是否显示二级科室骨架
const isShowSkeleton = ref(false)

// 定义二级科室骨架参数
const skeleton = reactive([
    {
      type: 'flex',
      num: 1,
      style: 'padding:0 10rpx;',
      children: [
        {
          type: 'custom',
          num: 1,
          style: 'width: 120rpx;height: 120rpx;marginRight: 45rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 120rpx;height: 120rpx;marginRight: 45rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 120rpx;height: 120rpx;marginRight: 45rpx;'
        }
      ]
    },
    20,
    {
      type: 'flex',
      num: 1,
      style: 'padding:0 10rpx;',
      children: [
        {
          type: 'custom',
          num: 1,
          style: 'width: 120rpx;height: 35rpx;marginRight: 45rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 120rpx;height: 35rpx;marginRight: 45rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 120rpx;height: 35rpx;marginRight: 45rpx;'
        }
      ]
    },
])
// ------------------ 定义骨架变量结束 -------------------
</script>

<style scoped lang="scss">
.outpatient-container {
    display: flex;
    // h5页面使用better-scroll插件实现滚动
    /* #ifdef H5 */
    height: calc(100vh - 80rpx);
    /* #endif */
    // 左侧区域、一级分类
    .left {
        width: 200rpx;
        border-right: 4rpx solid #ccc;
        // h5页面使用better-scroll插件实现滚动
        /* #ifdef H5 */
        height: calc(100vh - 80rpx);
        /* #endif */
        overflow: hidden;
        .top_category {
            .category-item {
                height: 80rpx;
                line-height: 80rpx;
                text-align: center;
                border-left: 4rpx solid transparent;
                padding: 0 20rpx;
            }
            .active {
                background-color: #fff;
                border-left: 4rpx solid $main-color;
                color: $main-color;;
            }
        }

        .scroll-view {
            height: 100vh;
            .category-item {
                height: 80rpx;
                line-height: 80rpx;
                text-align: center;
                border-left: 4rpx solid transparent;
                padding: 0 20rpx;
            }
            .active {
                background-color: #fff;
                border-left: 4rpx solid #CD0011;
                color: #CD0011;
            }
        }
    }

    // 右侧区域、子级分类
    .right {
        flex: 1;
        background-color: #fff;
        // h5页面使用 better-scroll 插件实现滚动
        /* #ifdef H5 */
        height: calc(100vh - 80rpx);
        /* #endif */
        overflow: hidden;
        // 非h5页面使用 scroll-view 插件实现滚动
        /* #ifndef H5 */
        .scroll-view {
            height: 100vh;
        /* #endif */
            .sub-category-list {
                display: flex;
                flex-wrap: wrap;
                padding: 20rpx 35rpx 0 35rpx;

                .sub-category-item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: 160rpx;
                    margin-bottom: 40rpx;

                    &:nth-child(3n) {
                        margin-right: 0;
                    }
                    &:last-child {
                        margin-right: 0;
                    }
                    .cover {
                        width: 140rpx;
                        height: 140rpx;
                        margin-bottom: 10rpx;
                    }
                    .name {
                        font-size: 24rpx;
                    }
                }
            }
        /* #ifndef H5 */
        }
        /* #endif */
    }

    // 三级科室区域
    .scroll-view {
        /* #ifndef APP-NVUE */
        width: 100%;
        height: 100%;
        /* #endif */
        flex:1;

        // 处理抽屉内容滚动
        .scroll-view-wrap {
            flex: 1;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;

            // 内容盒子
            .scroll-content-box {
                padding-top: 20rpx;
                padding-left: 20rpx;
                padding-right: 20rpx;
                .title-panel {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding-bottom: 10rpx;
                    border-bottom: 2rpx solid #faf8f8;
                    .title {
                        font-size: 30rpx;
                        font-weight: bold;
                        color: $main-color;
                    }
                    .iconfont {
                        font-size: 36rpx;
                        color: #ccc;
                    }
                }
                .item {
                    padding: 20rpx;
                    border-bottom: 2rpx solid #faf8f8;
                    &:last-child {
                        border-bottom: none;
                    }
                }
            }

            // 关闭盒子
            .close-box {

            }
        }
    }
}
</style>